import React, { Component } from 'react';
import { StyleSheet, View, Text, ScrollView} from 'react-native';
import { BlockSelect, Label } from 'iftide';


export default class Basic2 extends Component{
    constructor(props) {
        super(props);

        this.state = {
            Data1: [
                {label: '10元', description: '售价：10.00元', value: '1', checked: false},
                {label: '20元', description: '售价：20.00元', value: '2', checked: false},
                {label: '30元', description: '售价：29.98元', value: '3', checked: false},
                {label: '50元', description: '售价：49.96元', value: '4', checked: false},
                {label: '100元', description: '售价：99.80元', value: '5', checked: false},
                {label: '200元', description: '售价：199.00元', value: '6', checked: false},
                {label: '500元', description: '售价：495.00元', value: '7', checked: false, disabled: true},
                {label: '1000元', description: '售价：990.00元', value: '8', checked: true},
            ],
            Data2: [
                {label: '北京', value: '1', checked: true},
                {label: '上海', value: '2', checked: false, disabled: true},
                {label: '深圳', value: '3', checked: false},
                {label: '广州', value: '4', checked: false},
                {label: '巴里坤哈萨克自治县', value: '5', checked: false},
                {label: '西安', value: '6', checked: false},
                {label: '重庆', value: '7', checked: false},
                {label: '厦门', value: '8', checked: false},
            ],
            Data3: [
                {label: '本日', value: '本日', checked: false, disabled: true},
                {label: '近1周', value: '近1周', checked: false},
                {label: '近1月', value: '近1月', checked: false,},
                {label: '近3月', value: '近3月', checked: false,},
                {label: '近6月', value: '近6月', checked: true,},
            ],
            defaultIndex: -1
        };
    }

    render(){

        return(
            <View style={{flex:1,height: '100%'}}>
                    <View style={styles.container}>
                        <View style={styles.label}>
                            <Label text = '块状选择 - 多选（大）' fontWeight={'bold'} textDecorationLine={'underline'}/>
                        </View>
                        <BlockSelect
                            data={this.state.Data1}
                            maxSelectedOptions={3}
                            type={'checkbox'}
                            style={'primary'}
                            size={'large'}
                            isRadius={true}
                            onPress={(checked) =>  alert(checked)}
                            />

                        <View style={styles.label}>
                            <Label text = '块状选择 - 多选（中）' fontWeight={'bold'} textDecorationLine={'underline'}/>
                        </View>
                        <BlockSelect
                            data={this.state.Data2}
                            maxSelectedOptions={2}
                            type={'checkbox'}
                            style={'ghost'}
                            size={'middle'}
                            isRadius={false}
                            />

                        <View style={styles.label}>
                            <Label text = '块状选择 - 多选（小）' fontWeight={'bold'} textDecorationLine={'underline'}/>
                        </View>
                        <BlockSelect
                            data={this.state.Data3}
                            maxSelectedOptions={3}
                            type={'checkbox'}
                            style={'primary'}
                            size={'small'}
                            isRadius={true}
                            />
                    </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        height: '100%',
    },
    label: {
        padding: 13,
        backgroundColor: '#F5F7F9',
        borderBottomWidth: 1,
        borderBottomColor: '#D8D8D8',
        borderTopWidth: 1,
        borderTopColor: '#D8D8D8',
    }
});